<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父子组件数据传递</title>
		<script src="../libs/vue.js" type="text/javascript"></script>
	</head>
	<body>
		<div id='root'>
			<counter :count='1.032'></counter>
			<!--带冒号:表示传递数值到子组件，此时传递字符串会报错-->
			<counter count='0.000002'></counter>
			<!--不带冒号默认传递字符串-->
			<new-counter count='1'></new-counter>
			
			<v-mycompute :number='2'></v-mycompute> 
		</div>
	</body>
	<script>
		//父组件通过属性传值到子组件，子组件通过事件触发传值到父组件。
		
		var counter = Vue.component('counter', {
			props: ['count'], //接收父组件传递过来的数据
			template: '<div><button @click="handleCount">{{number}}</button></div>',
			data:function(){
				return {
					number:this.count //接收父组件数据放到子组件的data中
				}
			},
			methods: {
				handleCount: function() {
					// this.count++; 此方式可以执行但是会发出警告，Vue遵循单向数据流，父组件可以修改传递过来的数据，子组件不能去修改父组件的数据
					this.number ++;
				}
			}
		});
		
		var mycompute = Vue.component('v-mycompute',{
			template:'<button @click="totalcount">计算  ：{{total}}</button>',
			props:['number'],
			data:function(){
				return {
					count1:0,
					count2:1,
					total:this.number //拷贝副本，不直接修改父组件的数据
				}
			},
			methods: {
				totalcount: function() {
					this.count1++;
					this.count2=2;
					this.total+= this.count1+this.count2;
					this.$emit('changeNumber',this.count1,this.count2);
				}
			}
		})

		var vm = new Vue({
			el: '#root',
			components: {
				newCounter: counter //组建重命名 等价于 new-counter :counter
			},
			data:{
				number:0
			},
			methods:{
				computeNumber:function(a,b){
					this.number = a+b;
				}
				
			}

		});
	</script>

</html>
